<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
  #after { display: contents }
  #after::after { content: "" }
</style>
<div id="host">
  <span id="after">
    <span id="changeDisplay"></span>
  </span>
</div>
<script>
  host.attachShadow({mode:"open"});
  host.offsetTop;
  test(() => {
    // #after is not in the flat tree, but a bug causes getComputedStyle to
    // store a ComputedStyle on it.
    getComputedStyle(after).color;
    // This should not trigger a layout tree rebuild, but it does because we
    // traverse down into #after because it now has a ComputedStyle. That
    // causes a crash in RebuildPseudoElementLayoutTree when trying to update
    // ::after which does not have a LayoutParent().
    changeDisplay.style.display = "block";

    assert_equals(host.offsetTop, 8, "Should not crash");
  }, "Changing display of an element not in the flat tree should not update pseudo elements.");
</script>
